<template>
  <div class="list">
    <div class="input-box">
      <input
        type="text"
        placeholder="输入商家"
        @click="$router.push({ name:'search',params: {list:list[oIndex].content}})"
      />
    </div>
    <div class="navbar">
      <span
        v-for="(item,index) in list"
        :key="index"
        @click="saveIndex(index)"
        :class="{active:oIndex===index}"
      >{{item.nav}}</span>
    </div>
    <div class="navys">
      <span>年货节热卖</span>
      <span>津贴联盟</span>
      <span>满减优惠</span>
      <span>品质联盟</span>
    </div>
    <div class="lists">
      <div
        class="item"
        v-for="(item,index) in list[oIndex].content"
        :key="index"
        @click="godetail(item)"
      >
        <div class="img">
          <img :src="item.pic" alt />
        </div>
        <div class="text">
          <h4 class="name">{{item.name}}</h4>
          <div class="yx">月销：{{item.yx}}</div>
          <div class="qs">
            <span>起送￥{{item.qs}}</span>
            <span>{{item.km}}km</span>
          </div>
          <div class="mj">
            <span>{{item.xm}}减{{item.xmj}}</span>
            <span>{{item.zm}}减{{item.zmj}}</span>
            <span>{{item.dm}}减{{item.dmj}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { log } from "util";
export default {
  data() {
    return {
      oIndex: 0
    };
  },
  computed: {
    ...mapState(["list"])
  },
  methods: {
    saveIndex(index) {
      this.oIndex = index;
      /* 距离最近 */
      if (index === 1) {
        this.list[index].content.sort((a, b) => {
          return a.km - b.km;
        });
        /* 销量最高 */
      } else if (index === 2) {
        this.list[index].content.sort((a, b) => {
          return b.yx - a.yx;
        });
      }
    },
    godetail(item) {
      this.$router.push({
        name: "detail",
        params: item
      });
    }
  }
};
</script>
